<script setup>
import { ref } from 'vue'
const searchDishInfo = ref({
  title: '',
  status: '',
  date: ''
})

const onSubmit = () => {
  console.log('submit!')
}
const clear = () => {

}

//新增 --批量删除
const addDish = () => {

}
const delDishes = () => {

}
//操作表格
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = ref([
  {
    id: 1,
    name: "当归生姜羊肉汤",
    imageUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.v7tmYWYYkzinN89v_53nqgHaEL?w=284&h=180&c=7&r=0&o=7&cb=thfc1&pid=1.7&rm=3",
    description: '环境优美',
    address: "《金匮要略》",
    rating: "2.6",
    openingHour: '8:00-19:00',
    status: '开圆',
    createTime: "2024-01-15 08:30:45"
  },
]);

</script>
<template>
  <PageContainer title="社区管理">
    <!-- 头部--表单 -->
    <div class="container">
      <el-form :inline="true" :model="searchDishInfo" class="demo-form-inline">
        <el-form-item label="社区名称">
          <el-input v-model="searchDishInfo.title" placeholder="请输入社区名称" clearable />
        </el-form-item>
        <el-form-item label="社区状态">
          <el-select v-model="searchDishInfo.status" placeholder="请选择社区状态" clearable>
            <el-option label="闭园" value="0" />
            <el-option label="开圆" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="searchDishInfo.date" type="daterange" range-separator="到" start-placeholder="开始时间"
            end-placeholder="结束时间" :size="size" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增、批量删除按钮-->
    <div class="container">
      <el-button type="primary" @click="addDish">+ 新增社区</el-button>
      <el-button type="info" @click="delDishes">- 批量删除</el-button>
    </div>
    <!-- 表格 -->
    <div class="container">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="selection" width="46" align="center" />
        <el-table-column label="id" width="56" type="index" align="center">
        </el-table-column>
        <el-table-column label="社区名称" width="120" prop="name" align="center">
        </el-table-column>
        <el-table-column label="社区照片" width="150" prop="imageUrl" align="center">
          <template #default="scope">
            <img :src="scope.row.imageUrl" width="66px">
          </template>
        </el-table-column>
        <el-table-column label="社区描述" width="185" prop="description" align="center">
        </el-table-column>
        <el-table-column label="详细地址" width="200" prop="address" align="center">
        </el-table-column>
        <el-table-column label="综合评分" width="82" prop="rating" align="center">
        </el-table-column>
        <el-table-column label="社区状态" width="82" prop="status" align="center">
        </el-table-column>
        <el-table-column label="开放时间" width="160" prop="openingHour" align="center">
        </el-table-column>
        <el-table-column label="创建时间" width="160" prop="createTime" align="center">
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template #default="scope">
            <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button type="danger" plain @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 20, 30]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="100" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        style="margin-top: 20px;justify-content: start;" />
    </div>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  margin: 10px 0;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
